<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="管理员手机号码">
                  <el-input
                    v-model="searchModel.mobile"
                    placeholder="手机号"
                  />
                </el-form-item>
                <el-form-item label="操作类型">
                  <el-select v-model="searchModel.methodType" placeholder="请选择">
                    <el-option
                      v-for="item in methodTypes"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="操作模块">
                  <el-select v-model="searchModel.module" placeholder="请选择">
                    <el-option
                      v-for="item in modules"
                      :key="item.desc"
                      :label="item.desc"
                      :value="item.value"
                      :disabled="item.disabled"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="操作完成时间:">
                  <el-date-picker
                    v-model="searchModel.queryTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    align="right"
                  />
                </el-form-item>

                <el-form-item class="operations">
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="mini"
              style="width: 100%"
            >
              <el-table-column
                prop="createTime"
                label="操作时间"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
              />
              <el-table-column
                prop="username"
                label="用户名"
              />
              <el-table-column
                prop="module"
                label="用户的操作模块"
              />
              <el-table-column
                prop="interfaceUrl"
                label="接口路由"
              />
              <el-table-column
                prop="methodType"
                label="操作类型"
              />
              <el-table-column
                prop="methodDesc"
                label="方法操作描述"
              />
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { searchOperationRecord, listOperationRecordModule } from '@/api/business'
const defaultModel = {
  pageNo: 1,
  count: 0,
  pageSize: 10,
  mobile: '',
  methodType: '',
  module: ''
}
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      adminUserIds: [],
      modules: [],
      methodTypes: [
        {
          label: '新增',
          value: 'insert'
        },
        {
          label: '修改',
          value: 'update'
        },
        {
          label: '删除',
          value: 'delete'
        }]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    search() {
      this.getList(1)
    },

    getList(pageNo) {
      var self = this
      this.loading = true
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo
      }

      const searchModel = _.cloneDeep(this.searchModel)
      searchOperationRecord(this.compileSearchModel(searchModel))
        .then((resp) => {
          self.searchModel.pageNo = ++resp.pageNo
          self.searchModel.count = resp.count
          self.searchModel.pageSize = resp.pageSize
          self.list = resp.data
          self.loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel)
      this.getList(1)
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1
      if (searchModel.queryTime && searchModel.queryTime.length) {
        searchModel['minQueryTime'] = searchModel.queryTime[0]
        searchModel['maxQueryTime'] = searchModel.queryTime[1]
      }
      delete searchModel.queryTime
      return searchModel
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val
      this.getList(1)
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val)
    },

    initSearchData() {
      listOperationRecordModule().then(resp => {
        this.modules = resp.data
      })
    },
    init() {
      // 初始化搜索框中数据
      this.initSearchData()
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
